<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h2{
				color: #979c97;
				text-align: center;
			}
			nav{
				display: flex;
				width: 1200px;
				margin: 0 auto;
			}
			div{
				position: relative;
				width: 200px;
				height: 200px;
				transition: all 0.5s;
				background-color: var(--color);
			}
			div::after{
				content:"";
				position: absolute;
				top: 20%;
				left: 50%;
				transform: translate(-50%,0%);
				width: 55px;
				height: 55px;
				border-radius: 50px;
				opacity: 0;
				background:radial-gradient(transparent,#ffffff6e);
			}
			div:hover::after{
				animation: fang_da 0.75s linear;
			}
			div::before{
				content: attr(text);
				width: 100%;
				position: absolute;
				bottom: 20px;
				color: white;
				text-align: center;
			}
			div:hover{
				transition: all 0.5s;
				height: 220px;
				border-bottom: #000000 2.5px solid;
			}
			img{
				width: 39px;
				position: absolute;
				top: 40px;
				left: 50%;
				transform: translate(-50%,0);
				background-color: #ffffff6e;
				padding: 8px;
				border-radius: 50px;
			}
			@keyframes fang_da{
				from{transform:translate(-50%,-4.2%) scale(1);opacity: 1;}
				to{transform:translate(-50%,-4.2%) scale(1.8);opacity: 0;box-shadow: 0 0 12px white;}
			}
			
		</style>
	</head>
	<body>
		<h2>css响应式滑动</h2>
		<nav>
			<div class="a1" style="--color:#f47e02;" text="Home">
				<img src="img/首页-面性.png" alt="">
			</div>
			<div class="a2" style="--color:#ffa917;" text="Services">
				<img src="img/实验管理.png" >
			</div>
			<div class="a3" style="--color:#12a0d8;" text="Portfolio">
				<img src="img/毛笔.png" >
			</div>
			<div class="a4" style="--color:#177cbe;" text="Blog">
				<img src="img/标签.png" >
			</div>
			<div class="a5" style="--color:#284b5c;" text="The team">
				<img src="img/好友.png" >
			</div>
			<div class="a6" style="--color:#223d47;" text="Contact">
				<img src="img/信封,信息,消息.png" >
			</div>
		</nav>
	</body>
</html>
